<style lang='scss' scoped>
.game1 {
	display: flex;
	flex-direction: column;
	.contentBox{
		flex: 1;
		.drag {
			position: absolute;
			width: 100px;
			height: 100px;
			background-color: red;
		}
		.targetBox{
			width: 10rem;
			height: 10rem;
			margin-top: 20rem;
			margin-left: 10rem;
			border: 1px solid red;
			display: flex;
			align-items: center;
			justify-content: space-around;
		}
	}
}

</style>
<template>
  <div class="game1">
	 <div class="contentBox">
		 <div ref="dragBox" class="drag"
		 	 @touchstart="touchstartHandle('dragBox',$event)"   
		 	 @touchmove="touchmoveHandle('dragBox',$event)"
		 	 >
		 	 可拖拽元素
		 </div>
		 <div ref="targetBox" class="targetBox">此地无银三百两</div>
	 </div>
  </div>
</template>

<script>

export default {
  name: 'Game1',
  components: {
  },
  data() {
	return {
	  coordinate: {
		  client: {},
		  elePosition: {},
		  targetScope: {}
	  }
	}
  },
  mounted() {
	  const element = this.$refs["targetBox"]
	  console.log(this.$refs["targetBox"].getBoundingClientRect().width)
	  this.coordinate.targetScope.x = [element.offsetLeft + element.getBoundingClientRect().width*1/4,element.offsetLeft + element.getBoundingClientRect().width*3/4]
	  this.coordinate.targetScope.y = [element.offsetTop + element.getBoundingClientRect().height*1/4,element.offsetTop + element.getBoundingClientRect().height*3/4]
	  console.log("this.coordinate.targetScope",this.coordinate.targetScope)
	  
  },
  methods: {
	  // @touchend="touchendHandle('dragBox',$event)"
	  touchendHandle(refName, e) {
		  let element = e.changedTouches[0]
		  console.log("e",e)
		  console.log(`鼠标位置: (${element.clientX},${element.clientY})`)
		  if(element.clientX>=this.coordinate.targetScope.x[0]&&element.clientX<=this.coordinate.targetScope.x[1]){
			if(element.clientY>=this.coordinate.targetScope.y[0]&&element.clientY<=this.coordinate.targetScope.y[1]){
				alert("恭喜你，捡到300两银子！")	  
			}  
		  }
	  },
	  touchstartHandle(refName, e) {
		  let element = e.targetTouches[0]
		  // 记录点击的坐标
		  this.coordinate.client = {
			  x: element.clientX,
			  y: element.clientY
		  }
		  // 记录需要移动的元素坐标
		  this.coordinate.elePosition.left = this.$refs[refName].offsetLeft
		  this.coordinate.elePosition.top = this.$refs[refName].offsetTop
	  },
	  touchmoveHandle(refName, e) {
		  let element = e.targetTouches[0]
		  // 根据初始 client 位置计算移动距离(元素移动位置=元素初始位置+光标移动后的位置-光标点击时的初始位置)
		  let x = this.coordinate.elePosition.left + (element.clientX - this.coordinate.client.x)
		  let y = this.coordinate.elePosition.top + (element.clientY - this.coordinate.client.y)
		  // 限制可移动距离，不超出可视区域
		  x = x <= 0 ? 0 : x >= innerWidth - this.$refs[refName].offsetWidth ? innerWidth - this.$refs[refName].offsetWidth : x
		  y = y <= 0 ? 0 : y >= innerHeight - this.$refs[refName].offsetHeight ? innerHeight - this.$refs[refName].offsetHeight : y
		  // 移动当前元素
		  this.$refs[refName].style.left = x + 'px'
		  this.$refs[refName].style.top = y + 'px'
		  console.log(`(${x},${y})`)
		  this.ok(e)
	  },
	  ok(e) {
		let element = e.changedTouches[0]
		console.log("e",e)
		console.log(`鼠标位置: (${element.clientX},${element.clientY})`)
		if(element.clientX>=this.coordinate.targetScope.x[0]&&element.clientX<=this.coordinate.targetScope.x[1]){
			if(element.clientY>=this.coordinate.targetScope.y[0]&&element.clientY<=this.coordinate.targetScope.y[1]){
				alert("恭喜你，捡到300两银子！")	  
			}  
		}
	  },
	}
}
</script>
